<template>
	<view class="count">
		<!-- banner图 -->
		<view class="banner">
			<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode" style="height: 430rpx;">
				<swiper class="swiper-box" @change="change" style="height: 430rpx;">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view style="width: 100%; height: 100%; border-radius: 16rpx;">
							<image :src="item.url" mode="" style="width: 100%; height:430rpx;">
							</image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>


		<!-- 内容 -->
		<view class="body">
			<!-- 即可订水 -->
			<view class="waternow">
				<scroll-view :scroll-x="true" :scroll-left="scrollLeft" :scroll-with-animation="true"
					class="scroll_list" @touchstart="cardTouchStart($event)" @touchend="cardTouchEnd">
					<view class="card_item" v-for="(item, index) in cardList" :key="index"
						:class="{'card_checked': checkedIndex === index}" @click="cardHandle(index)">
						<view class="image-placeholder"></view>
						<view class="info">
							<text>{{ item.name }}</text>

						</view>
						<view class="info">
							<text>{{ item.volume }} ￥{{ item.price }}</text>
						</view>
						<view class="order-button">立即订水</view>
					</view>
				</scroll-view>
			</view>

			<!-- 桶装水 -->
			<view class="barwater">
				<view class="title">桶装水</view>
				<view class="card-container">
					<view class="card">
						<view class="card-content">
							<view class="gre_box">
								<text class="volume">18.9L</text>
							</view>
							<text class="description">xxx公司自然好水就买农夫</text>
							<text class="price">￥260</text>
						</view>
						<view class="buy-button">购买></view>
					</view>
					<view class="card">
						<view class="card-content">
							<view class="gre_box">
								<text class="volume">18.9L</text>
							</view>
							<text class="description">xxx公司自然好水就买农夫</text>
							<text class="price">￥260</text>
						</view>
						<view class="buy-button">购买></view>
					</view>
				</view>
			</view>
		
		<!-- 水票 -->
		<view class="barwater">
			<view class="title">水票</view>
			<view class="card-container">
				<view class="card">
					<view class="card-content">
						<view class="gre_box">
							<text class="volume">18.9L</text>
						</view>
						
						<text class="description">xxx公司自然好水就买农夫</text>
						<text class="price">￥260</text>
					</view>
					<view class="buy-button">购买></view>
				</view>
				<view class="card">
					<view class="card-content">
						<view class="gre_box">
							<text class="volume">18.9L</text>
						</view>
						<text class="description">xxx公司自然好水就买农夫</text>
						<text class="price">￥260</text>
					</view>
					<view class="buy-button">购买></view>
				</view>
			</view>
		</view>
				
		</view>
	</view>
</template>

<script>
	import swpHomeHeader from "@/pages/tabbar/color/home-header.vue";
	import goodsTemplate from '@/components/m-goods-list/list'
	import config from '@/config/config'
	import {
		getGoodsSkuList,
		getCategoryList2,
		getCategoryList3
	} from "@/api/goods.js";
	var ttt = 0;
	//高德SDK
	import amap from '@/js_sdk/amap-wx.js';
	export default {
		components: {
			swpHomeHeader,
			goodsTemplate
		},
		data() {
			return {
				cardList: [{
						name: '饮用天然矿泉水',
						volume: '18.9L',
						price: '13'
					},
					{
						name: '饮用天然矿泉水',
						volume: '18.9L',
						price: '13'
					},
					{
						name: '饮用天然矿泉水',
						volume: '18.9L',
						price: '13'
					},
					{
						name: '饮用天然矿泉水',
						volume: '18.9L',
						price: '13'
					}
				],
				scrollLeft: 0,
				checkedIndex: 1, // 初始高亮中间项
				startX: 0,
				endX: 0,
				distance: 100,

				district: '上高',
				goodsList: [],
				tabCurrentIndex: 0,
				themeColor: '#FFF', //f39700
				topClass: [


				],
				showHeader: true,
				afterHeaderOpacity: 1, //不透明度
				headerPosition: 'fixed',
				headerTop: null,
				statusTop: null,
				nVueTitle: null,
				city: '北京',
				currentSwiper: 0,
				// 轮播图片
				swiperList: [{
						id: 1,
						src: 'url1',
						img: '/static/img/1.jpg'
					},
					{
						id: 2,
						src: 'url2',
						img: '/static/img/2.jpg'
					},
					{
						id: 3,
						src: 'url3',
						img: '/static/img/3.jpg'
					}
				],
				Promotion: [],
				//猜你喜欢列表
				productList: [{
						goods_id: 0,
						img: '/static/img/goods/p1.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 1,
						img: '/static/img/goods/p2.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 2,
						img: '/static/img/goods/p3.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 3,
						img: '/static/img/goods/p4.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 4,
						img: '/static/img/goods/p5.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 5,
						img: '/static/img/goods/p6.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 6,
						img: '/static/img/goods/p7.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 7,
						img: '/static/img/goods/p8.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 8,
						img: '/static/img/goods/p9.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 9,
						img: '/static/img/goods/p10.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					}
				],
				loadingText: '正在加载...',
				categoryList: [],
				params: {
					pageNumber: 1,
					pageSize: 10,
					categoryPath: ''
				},

				// 轮播
				info: [{
					content: '内容 A',
					url: 'https://fangshijie2025.oss-cn-hangzhou.aliyuncs.com/3aa88abb107444b2956aaf2e3c58e68f.png'
				}, {
					content: '内容 B',
					url: '/static/nav/image99.png'
				}, {
					content: '内容 C',
					url: '/static/nav/image99.png'
				}],
				current: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,


				// 图标列表

				build_list: [{
						name: '客厅家具',
						img: '/static/img/my/lifeimg1.png',
						url: ''
					},
					{
						name: '卧室家具',
						img: '/static/img/my/lifeimg2.png',
						url: ''
					},
					{
						name: '餐厅家具',
						img: '/static/img/my/lifeimg3.png',
						url: ''
					}

				],

				info: [{
					content: '内容 A',
					url: '/static/nav/image99.png'
				}, {
					content: '内容 B'
				}, {
					content: '内容 C'
				}],
				current: 0,
				mode: 'round',
			};
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
			this.headerTop = e.scrollTop >= 0 ? null : 0;
			this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			// uni.showToast({ title: '触发上拉加载' });
			let len = this.productList.length;
			if (len >= 40) {
				this.loadingText = '到底了';
				return false;
			}
			// 演示,随机加入商品,生成环境请替换为ajax请求
			let end_goods_id = this.productList[len - 1].goods_id;
			for (let i = 1; i <= 10; i++) {
				let goods_id = end_goods_id + i;
				let p = {
					goods_id: goods_id,
					img: '/static/img/goods/p' + (goods_id % 10 == 0 ? 10 : goods_id % 10) + '.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款'
				};
				this.productList.push(p);
			}
		},
		onLoad() {

			// #ifdef APP-PLUS
			this.nVueTitle = uni.getSubNVueById('homeTitleNvue');
			this.nVueTitle.onMessage(res => {
				let type = res.data.type;
				if (type == 'focus') {
					this.toSearch();
				}
			});
			this.showHeader = false;
			this.statusHeight = plus.navigator.getStatusbarHeight();
			// #endif
			this.amapPlugin = new amap.AMapWX({
				//高德地图KEY，随时失效，请务必替换为自己的KEY，参考：http://ask.dcloud.net.cn/article/35070
				key: config.aMapKey
			});
			//定位地址
			this.amapPlugin.getRegeo({
				success: data => {
					this.city = data[0].regeocodeData.addressComponent.city.replace(/市/g, ''); //把"市"去掉
					// #ifdef APP-PLUS
					this.nVueTitle.postMessage({
						type: 'location',
						city: this.city
					});
					// #endif
				}
			});
			//开启定时器
			this.Timer();
			//加载活动专区
			this.loadPromotion();

			this.getGoodsData();
			this.getCategoryList()
		},
		methods: {
			cardTouchStart(e) {
				this.startX = e.changedTouches[0].pageX;
			},
			cardTouchEnd(e) {
				this.endX = e.changedTouches[0].pageX;
				const x = this.startX - this.endX;
				const absX = Math.abs(x || 0);
				if (x < 0 && absX > this.distance) {
					this.sliderSwitch(false);
				} else if (x > 0 && absX > this.distance) {
					this.sliderSwitch(true);
				}
			},
			sliderSwitch(status) {
				// status: false 向右滑， true 向左滑
				if (!status) {
					let idx = this.checkedIndex - 1;
					if (this.checkedIndex > 0) this.cardHandle(idx);
				} else {
					let idx = this.checkedIndex + 1;
					if (this.checkedIndex < this.cardList.length - 1) this.cardHandle(idx);
				}
			},
			cardHandle(index) {
				this.checkedIndex = index;
				this.scrollLeft = index * 100; // 根据实际卡片宽度调整
			},
			//操作banner
			changebanner(e) {
				console.log("操作了", e.detail.current)
			},
			// 返回上一步
			reback() {
				// 返回上一步
				uni.navigateBack({
					delta: 1 // 表示返回上一级页面，如果 delta 大于 1 则返回多级页面
				});
			},
			getCategoryList() {
				//其他模块查询子级，参照如下
				// HOUSE_MEDIATOR("房产中介"),
				// DECORATION_COMPANY("装修公司"),
				// ELECTRONICS_STORE("家电百货"),
				// BUILDING_MATERIALS_COMPANY("建材公司"),
				// HOME_APPLIANCE_COMPANY("家居公司"),
				// WATER_SUPPLY_COMPANY("送水公司"),
				// MILK_SUPPLY_COMPANY("送米公司");
				getCategoryList3("建材公司").then(res => {
					if (res.data.code == 200) {
						this.categoryList = res.data.result
					}
				})

			},
			search() {
				uni.navigateTo({
					url: '/pages/navigation/search/searchPage'
				})
			},
			getGoodsData() { //商品
				// #TODO
				//this.params.goodsType=this.type;
				getGoodsSkuList(this.params).then(res => {

					if (res.data.success) {
						if (res.data.result.records.length > 0) {
							this.goodsList.push(...res.data.result.records);
						} else {
							this.loadStatus = 'loadmore';
						}

					}
				})

			},
			bindSortId(data) {
				console.log(data)
				/* this.isSortType = data == -1 ? 0 : 1;
				this.getProductList(data);
				if (this.hostProduct.length == 0) {
				  this.get_host_product();
				} */
				this.tabCurrentIndex = data.current
			},
			//加载Promotion 并设定倒计时,,实际应用中应该是ajax加载此数据。
			loadPromotion() {
				let cutTime = new Date();
				let yy = cutTime.getFullYear(),
					mm = cutTime.getMonth() + 1,
					dd = cutTime.getDate();
				let tmpcountdown = yy + '/' + mm + '/' + dd + ' 23:59:59';
				let tmpPromotion = [{
						title: '整点秒杀',
						ad: '整天秒杀专区',
						img: '/static/img/s1.jpg',
						countdown: false
					},
					{
						title: '限时抢购',
						ad: '每天23点上线',
						img: '/static/img/s2.jpg',
						countdown: tmpcountdown
					} //countdown为目标时间，程序会获取当前时间倒数
				];
				//检查倒计时
				for (let i = 0; i < tmpPromotion.length; i++) {
					let row = tmpPromotion[i];
					if (row.countdown) {
						let h = '00',
							m = '00',
							s = '00';
						let currentTime = new Date();
						let cutoffTime = new Date(tmpcountdown);
						if (!(currentTime >= cutoffTime)) {
							let countTime = parseInt(
								(cutoffTime.getTime() - currentTime.getTime()) / 1000
							);
							h = parseInt(countTime / 3600);
							m = parseInt((countTime % 3600) / 60);
							s = countTime % 60;
							h = h < 10 ? '0' + h : h;
							m = m < 10 ? '0' + m : m;
							s = s < 10 ? '0' + s : s;
						}
						tmpPromotion[i].countdown = {
							h: h,
							m: m,
							s: s
						};
					}
				}
				this.Promotion = tmpPromotion;
			},
			//定时器
			Timer() {
				setInterval(() => {
					if (this.Promotion.length > 0) {
						for (let i = 0; i < this.Promotion.length; i++) {
							let row = this.Promotion[i];
							if (row.countdown) {
								if (
									!(
										row.countdown.h == 0 &&
										row.countdown.m == 0 &&
										row.countdown.s == 0
									)
								) {
									if (row.countdown.s > 0) {
										row.countdown.s--;
										row.countdown.s =
											row.countdown.s < 10 ?
											'0' + row.countdown.s :
											row.countdown.s;
									} else if (row.countdown.m > 0) {
										row.countdown.m--;
										row.countdown.m =
											row.countdown.m < 10 ?
											'0' + row.countdown.m :
											row.countdown.m;
										row.countdown.s = 59;
									} else if (row.countdown.h > 0) {
										row.countdown.h--;
										row.countdown.h =
											row.countdown.h < 10 ?
											'0' + row.countdown.h :
											row.countdown.h;
										row.countdown.m = 59;
										row.countdown.s = 59;
									}
									this.Promotion[i].countdown = row.countdown;
								}
							}
						}
					}
				}, 1000);
			},
			//消息列表
			toMsg() {
				uni.navigateTo({
					url: '../../msg/msg'
				})
			},
			//搜索跳转
			toSearch() {
				uni.showToast({
					title: '建议跳转到新页面做搜索功能'
				});
			},
			//轮播图跳转
			toSwiper(e) {
				uni.showToast({
					title: e.src,
					icon: 'none'
				});
			},
			//分类跳转
			toCategory(e) {
				this.params.pageNumber = 1
				this.goodsList = []
				this.params.categoryPath = e.id
				this.getGoodsData();

			},
			//推荐商品跳转
			toPromotion(e) {
				uni.showToast({
					title: e.title,
					icon: 'none'
				});
			},
			//商品跳转
			toGoods(e) {
				uni.showToast({
					title: '商品' + e.goods_id,
					icon: 'none'
				});
				uni.navigateTo({
					url: '../../goods/goods'
				});
			},
			//轮播图指示器
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			}
		}
	};
</script>

<style lang="scss">
	/*每个页面公共css */
	// @import "./font.scss";
</style>

<style lang="scss" scoped>
	.count {

		.banner {
			// border: 1px red solid;
			width: 100%;
			height: 430rpx;

		}

		.body {


			.waternow {
				// border: 1px red solid;
				width: 100%;
				height: auto;
				/* 根据实际需求调整高度 */

				.scroll_list {
					height: 250px;
					/* 调整高度以适应较小的屏幕 */
					margin-top: 20px;
					white-space: nowrap;
					flex-wrap: nowrap;

					.card_item {
						width: 100px;
						/* 调整宽度以适应较小的屏幕 */
						padding: 10px;
						height: auto;
						/* 调整高度以适应较小的屏幕 */
						flex: none;
						position: relative;
						display: inline-block;
						vertical-align: middle;
						background-color: #f0f0f0;
						border-radius: 10px;
						margin: 0 5px;
						/* 减小间距 */
						transition: all 0.3s;

						.image-placeholder {
							width: 100%;
							height: 120px;
							/* 调整高度以适应较小的屏幕 */
							background-color: #e0e0e0;
							border-radius: 10px;
						}

						.info {
							margin-top: 10px;
							text-align: center;
						}

						.order-button {
							margin-top: 10px;
							padding: 5px 10px;
							/* 减小内边距 */
							background-color: #cccccc;
							border-radius: 20px;
							color: #000;
							text-align: center;
							font-size: 14px;
							/* 调整字体大小 */
						}
					}

					.card_checked {
						transform: scale(1.05);
						/* 高亮项放大 */
						box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
						/* 添加阴影效果 */
						background-color: #ffffff;
						/* 高亮项背景色 */
					}
				}

			}


			.barwater {
				margin-top: 48rpx;
				padding: 24rpx 24rpx;
				
				background-color: rgba(242,242,242);
				margin-bottom: 24rpx;
				
				.title {
					font-size: 18px;
					font-weight: bold;
					margin-bottom: 16px;
					text-align: center;
				}

				.card-container {
					display: flex;
					justify-content: space-between;
				}

				.card {
					width: 48%;
					/* 每个卡片占48%的宽度，留出一些间距 */
					background-color: #fff;
					border-radius: 8px;
					padding: 12px;
					box-sizing: border-box;
				}

				.card-content {
					display: flex;
					flex-direction: column;
					
					.gre_box{
						border: 1px rgba(1,167,59) solid;
						border-radius: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						width:100rpx ;
						// height: auto;
					}
				}

				.volume {
					font-size: 16px;
					// margin-bottom: 8px;
				}

				.description {
					font-size: 14px;
					color: #666;
					margin-bottom: 8px;
				}

				.price {
					font-size: 16px;
					font-weight: bold;
					margin-bottom: 12px;
				}

				.buy-button {
					background-color: rgba(1,167,59);
					color: #FFF;
					padding: 6px;
					text-align: center;
					border-radius: 4px;
					font-size: 14px;
				}
			}

		}



	}
</style>